<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="24">
        <div class="search-inp">
          <el-popover
            placement="bottom"
            width="600"
            trigger="click"
            v-model="visible">
            <el-empty
              v-if="knowleList.length==0"
              :image-size="1"
              :description="searchDesc"></el-empty>
            <div v-else>
              <ul
                class="list"
                v-infinite-scroll="handleQuery"
                :infinite-scroll-disabled="disabled"
                style="height:299px;overflow-y: auto;"
              >
                <li v-for="knowled in knowleList" :key="knowled.id" class="ql-editor"  v-html="knowled.contents" @click="details(knowled)"></li>
              </ul>
              <p v-if="loading">加载中...</p>
              <el-divider  v-if="noMore">人家也是有底线的</el-divider>
            </div>


            <el-input placeholder="请输入要搜索的知识内容" :clearable="true"
                      v-model="knowleQuery.content" class="input-with-select"
                      @keyup.enter.native="handleQuery" slot="reference">
              <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
            </el-input>

          </el-popover>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>阅读最多</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click='more("kb.read_num")'>更多>></el-button>
          </div>
          <el-table
            :data="readList"
            size="small"
            style="width: 100%">
            <el-table-column
              prop="knowleNum"
              label="知识编号">
            </el-table-column>
            <el-table-column
              prop="title"
              align="center"
              label="标题">
            </el-table-column>
            <el-table-column
              prop="readNum"
              align="center"
              label="浏览人次">
            </el-table-column>
            <!--<el-table-column
              prop="userName"
              label="添加人">
            </el-table-column>-->
            <el-table-column
              prop="address"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="viewContent(scope.row)">
                  查看内容
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>最新发布</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click='more("kb.add_time")'>更多>></el-button>
          </div>
          <el-table
            :data="newList"
            size="small"
            style="width: 100%">
            <el-table-column
              prop="knowleNum"
              label="知识编号">
            </el-table-column>
            <el-table-column
              prop="title"
              align="center"
              label="标题">
            </el-table-column>
            <!--<el-table-column
              prop="userName"
              label="添加人">
            </el-table-column>-->
            <el-table-column
              prop="address"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="viewContent(scope.row)">
                  查看内容
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>本部门</span>
            <el-button style="float: right; padding: 3px 0"
                       type="text" @click="deptMore">更多>></el-button>
          </div>
          <el-table
            :data="deptKnowList"
            size="small"
            style="width: 100%">
            <el-table-column
              prop="knowleNum"
              label="知识编号">
            </el-table-column>
            <el-table-column
              prop="title"
              align="center"
              label="标题">
            </el-table-column>
            <!--<el-table-column
              prop="userName"
              label="添加人">
            </el-table-column>-->
            <el-table-column
              prop="address"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="viewContent(scope.row)">
                  查看内容
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {listKnowBase,allKnowBase} from "@/api/knowledge/knowBase";
  import {getMateContent} from '@/api/knowledge/content';
  export default {
    name: "Index",
    data() {
      return {
        searchDesc:'请输入要搜索的知识内容',
        //知识列表
        knowleList:[],
        //阅读最多
        readList: [],
        //  最新发布
        newList: [],
        //  本部门知识
        deptKnowList: [],
        queryParams:{
          pageNum: 1,
          pageSize: 5,
          orderByColumn: 'kb.knowle_num',
          isAsc: 'desc',
        },
        visible:false,
        //知识内容匹配
        knowleQuery:{
          pageNum: 0,
          pageSize: 10,
          //搜索内容
          content:'',
        },
        // 总条数
        total: 0,
        loading:false,

      };
    },

    methods: {
      details(info){
        const params = { id:info.id };
        this.$tab.openPage("知识内容", "/knowledge/knowlebase/content",params);
        this.knowleQuery.content='';
        this.knowleList=[];
      },
      more(order){
        const params={column:order};
        // knowledge/knowlebase/allKnowle/:column
        // router.push(`/knowledge/allKnowle/${order}`);
        // router.push({ path: `knowledge/knowlebase/allKnowle/${order}`, params: {column:order}});
        this.$tab.openPage("更多知识", "/knowledge/allKnowle",params);
      },
      deptMore(){
        this.$tab.openPage("知识内容", "knowledge/knowlebase");
      },
      getDeptKnowList(){
        this.queryParams.orderByColumn="kb.knowle_num";
        listKnowBase(this.queryParams).then(resoponse=>{
          this.deptKnowList=resoponse.rows;
          this.total=resoponse.total;
        });
      },
      getNewList(){
        this.queryParams.orderByColumn="kb.add_time";
        allKnowBase(this.queryParams).then(resoponse=>{
          this.newList=resoponse.rows;
          this.total=resoponse.total;
        });
      },
      getReadList(){
        this.queryParams.orderByColumn="kb.read_num";
        allKnowBase(this.queryParams).then(resoponse=>{
          this.readList=resoponse.rows;
          this.total=resoponse.total;
        });
      },
      viewContent(row){
        const params = { id:row.contentId };
        this.$tab.openPage("知识内容", "/knowledge/knowlebase/content",params);
      },
      handleQuery(){
        if(this.noMore){
          return
        }
        this.loading = true
        this.knowleQuery.pageNum+=1
        getMateContent(this.knowleQuery).then(response=>{
          this.knowleList=this.knowleList.concat(this.highlight(response.rows));

          this.total=response.total
          if(this.knowleList.length==0){
            this.searchDesc="未搜索到相关结果";
          }
          this.loading = false
          this.visible=true;
        })
      },
      highlight(result){
        const  keywords=this.knowleQuery.content;
        if (keywords) {
          let replace = new RegExp(keywords, 'ig');
          result.map((knowle) => {
            const contents=knowle.contents.trim()
            knowle.contents=contents.replace(replace, ()=>{
              return `<span style="color:#00ccff;">${keywords}</span>`
            })
          })
        }
        return result;
      },
      replaceKey(){
        return `<span style="color:red;background: #e3bc59;">${this.knowleQuery.content}</span>`
      },
    },
    created() {
      this.getDeptKnowList();
      this.getNewList();
      this.getReadList();
    },
   /* mounted() {
      this.getDeptKnowList();
      this.getNewList();
      this.getReadList();
    },*/
    watch:{
      "knowleList":{
        handler(val){
          this.visible = val.length!=0;
        }
      },
      "knowleQuery.content":{
        deep:true,
        handler(val){
          this.knowleList=[];
          this.knowleQuery.pageNum=0;
          // this.handleQuery();
          console.log("val",val)
          if(val.length==0){
            this.searchDesc="请输入要搜索的知识内容";
          }
        }
      }
    },
    computed: {
      noMore () {
        // return this.total >= this.knowleList.length;
        return this.total>0 && this.knowleList.length >= this.total;
      },
      disabled () {
        return this.loading || this.noMore
      }
    },
  };
</script>

<style lang="scss">

</style>

<style scoped lang="scss">
  .box-card {
    /*width: 540px;*/
    margin-right: 20px;
    min-height: 350px;
  }
  .search-inp {
    margin: 15px 25% 100px;
    width: 600px;
  }
  .search-card{
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }
  ul{
    margin: 0;
    padding:0;
  }
  li{
    padding:0;
    height: 30px;
  }
  .el-divider{
    margin: 5px 0;
  }





  /*.my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }*/

</style>

